<template>
  <div class="ltxyc">
    <div id="echartsLtxyc" />
  </div>
</template>

<script>
export default {
  props: {
    dep_code: {
      type: String,
      default: '450000-00-0000',
      require: true
    }
  },
  data() {
    return {
      echartsLtxyc: null,
      option: {
        title: {
          text: '5年离退休预测',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          axisLine: { show: true },
          axisTick: { show: false },
          splitArea: {
            color: '#f00',
            lineStyle: {
              color: '#f00'
            }
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: { show: false },
          boundaryGap: false,
          data: ['2022', '2023', '2024', '2025', '2026']
        },
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false }
          }
        ],
        series: [
          {
            name: '离退休',
            type: 'line',
            smooth: true, // 是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: '#6c50f3',
                shadowColor: 'rgba(0, 0, 0, .3)'
              }
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontWeight: 'bolder'
              }
            },
            itemStyle: {
              color: '#6c50f3',
              borderColor: '#fff',
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: { show: false },
            areaStyle: {
              color: '#6c50f3'
              // normal: {
              //   color: '#6c50f3',
              // color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
              //   [
              //     {
              //       offset: 0,
              //       color: 'rgba(108,80,243,0.3)'
              //     },
              //     {
              //       offset: 1,
              //       color: 'rgba(108,80,243,0)'
              //     }
              //   ],
              //   false
              // ),
              // shadowColor: 'rgba(108,80,243, 0.9)',
              // shadowBlur: 20
              // }
            },
            data: [120, 230, 140, 220, 160]
          }
        ]
      },
      depcode: '450000-00-0000'
    }
  },

  // watch: {
  //   dep_code(newValue, oldValue) {
  //     if (newValue) {
  //       (this.depcode = newValue), this.getLtxyc()
  //     }
  //   }
  // },
  mounted() {
    this.initLtxyc()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    initLtxyc() {
      this.echartsLtxyc = this.$echarts.init(
        document.getElementById('echartsLtxyc')
      )

      this.echartsLtxyc.setOption(this.option)
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener(
        'resize',
        () => this.echartsLtxyc.resize(),
        false
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.ltxyc {
  width: 100%;
  height: 32%;
  box-sizing: border-box;
  margin-bottom: 20px;
  // background-color: rgba(255, 255, 255, 0.03);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  display: flex;
  flex-direction: column;

  #echartsLtxyc {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
